<template>
  <div class="eco-progress-view">
    <!-- 项目信息卡片区 -->
    <el-row :gutter="24" class="card-row">
      <el-col :span="6">
        <el-card class="info-card" shadow="hover">
          <div class="card-title">项目名称</div>
          <div class="card-value">生态修复与循环利用示范项目</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="info-card" shadow="hover">
          <div class="card-title">项目周期</div>
          <div class="card-value">2024.01 ~ 2025.06</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="info-card" shadow="hover">
          <div class="card-title">修复区域数</div>
          <div class="card-value">8 个</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="info-card" shadow="hover">
          <div class="card-title">修复总面积</div>
          <div class="card-value">132,400 ㎡</div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="32" style="margin-top:32px;">
      <el-col :span="8">
        <el-card>
          <div class="progress-title">项目整体完成率</div>
          <div ref="circleRef" style="width:100%;height:220px;"></div>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card>
          <div class="progress-title">各阶段进展</div>
          <el-steps :active="2" finish-status="success" align-center>
            <el-step title="前期准备" description="2024-01~2024-03 已完成"/>
            <el-step title="方案设计" description="2024-03~2024-04 已完成"/>
            <el-step title="修复实施" description="2024-04~2025-03 进行中"/>
            <el-step title="评估验收" description="2025-04~2025-06 未开始"/>
          </el-steps>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="32" style="margin-top:32px;">
      <el-col :span="12">
        <el-card>
          <div class="progress-title">分区域修复进展</div>
          <el-table :data="regionList" border>
            <el-table-column prop="name" label="区域" width="120px"/>
            <el-table-column prop="area" label="面积(㎡)" width="120px"/>
            <el-table-column prop="leader" label="负责人" width="100px"/>
            <el-table-column prop="rate" label="进度" width="120px">
              <template #default="scope">
                <el-progress :percentage="scope.row.rate" :color="scope.row.color"/>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"/>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div class="progress-title">近期项目动态</div>
          <el-timeline>
            <el-timeline-item
              v-for="item in timeline"
              :key="item.date"
              :timestamp="item.date"
              :color="item.color"
            >
              <b>{{ item.title }}</b>
              <span v-if="item.desc" style="margin-left:8px;color:#888;">{{ item.desc }}</span>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

// 环形进度
const circleRef = ref<HTMLDivElement>()
const completePercent = 64
onMounted(() => {
  if (circleRef.value) {
    const chart = echarts.init(circleRef.value)
    chart.setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          progress: {
            show: true,
            width: 24,
            itemStyle: { color: '#67C23A' }
          },
          axisLine: { lineStyle: { width: 24, color: [[1, '#e0e8e5']] } },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false },
          pointer: { show: false },
          detail: {
            valueAnimation: true,
            fontSize: 38,
            fontWeight: 'bold',
            color: '#308d2d',
            offsetCenter: [0, '20%'],
            formatter: '{value} %'
          },
          data: [{ value: completePercent }]
        }
      ]
    })
  }
})

// 区域进展
const regionList = [
  { name: 'A区', area: 24000, leader: '张三', rate: 98, color: '#67C23A', remark: '已完成' },
  { name: 'B区', area: 20800, leader: '李四', rate: 75, color: '#409EFF', remark: '' },
  { name: 'C区', area: 16300, leader: '王五', rate: 58, color: '#E6A23C', remark: '难点攻关' },
  { name: 'D区', area: 12500, leader: '赵六', rate: 36, color: '#F56C6C', remark: '进度偏慢' },
  { name: 'E区', area: 13200, leader: '钱七', rate: 82, color: '#67C23A', remark: '' },
  { name: 'F区', area: 17100, leader: '孙八', rate: 61, color: '#409EFF', remark: '' },
  { name: 'G区', area: 11800, leader: '周九', rate: 45, color: '#E6A23C', remark: '待材料到场' },
  { name: 'H区', area: 14700, leader: '吴十', rate: 90, color: '#67C23A', remark: '' }
]

// 时间轴
const timeline = [
  { date: '2024-03-05', title: '完成前期准备', color: '#67C23A', desc: '地形地貌调查、资料收集' },
  { date: '2024-04-12', title: '修复方案通过评审', color: '#409EFF', desc: '专家组一致通过' },
  { date: '2024-07-20', title: 'A区全部完成', color: '#67C23A', desc: '修复成效良好' },
  { date: '2024-09-08', title: 'B区进度过半', color: '#409EFF', desc: '' },
  { date: '2024-12-25', title: 'C区难点攻克', color: '#E6A23C', desc: '技术创新方案应用' },
  { date: '2025-03-01', title: 'G区材料到场', color: '#E6A23C', desc: '' }
]
</script>

<style scoped>
.eco-progress-view {
  width: 100%;
  margin: 0;
  padding: 32px 0;
}
.card-row {
  margin-bottom: 8px;
}
.info-card {
  text-align: center;
  border-radius: 16px;
  background: linear-gradient(120deg,#fff 70%,#e7fbee 100%);
  box-shadow: 0 2px 12px #0001;
  min-height: 104px;
  margin-bottom: 16px;
}
.card-title {
  font-size: 15px;
  color: #888;
  margin-top: 10px;
}
.card-value {
  font-size: 25px;
  font-weight: bold;
  margin-top: 8px;
  color: #222;
}
.progress-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 18px;
  color: #308d2d;
}
</style>
